<template>
    <global-layout>
        <own-menu slot="aside"></own-menu>
        <div slot="main">
            <transition
                @before-enter="beforeEnter"
                @enter="enter"
                @leave="leave"
                :css="false"
            >   
                <router-view></router-view>
            </transition>
        </div>
    </global-layout>
</template>
<script>
/**
 * See: https://cn.vuejs.org/v2/guide/transitions.html
 */
import ownMenu from './components/own-menu';
window.velocity = window.Velocity;

export default {
    name: 'home',
    components: {
        ownMenu
    },
    methods: {
        beforeEnter(el) {
            el.style.opacity = 0;
            el.style.transform = 'translateX(0)';
            el.style.transform = 'translateY(0)';
        },
        enter(el, done) {
            window.velocity(el, {translateX: 0, translateY: 0, opacity: .6}, {duration: 0});
            window.velocity(el, {translateX: 0, translateY: 0, opacity: 1}, {duration: 600, complete: done});
        },
        leave(el, done) {
            done();
        }
    }
};
</script>